﻿@page
@{
    ViewBag.Title = "List";
}
<div id="simple-list-section" class="row">
    <div class="col-sm-2 col-sm-offset-3">
        <ul>
            <li>
                <span>Phone</span>
                <span>5%</span>
            </li>
            <li>
                <span>Book</span>
                <span>10%</span>
            </li>
            <li>
                <span>Table</span>
                <span>15%</span>
            </li>
        </ul>
    </div>
    <div class="col-sm-2">
        <ol>
            <li>
                <span>Phone</span>
                <span>20</span>
            </li>
            <li>
                <span>Book</span>
                <span>30</span>
            </li>
            <li>
                <span>Table</span>
                <span>40</span>
            </li>
        </ol>
    </div>
    <div class="col-sm-2">
        <ul id="ul-of-li-span">
            <li>
                <span>Item 1</span>
            </li>
            <li>
                <span>Item 2</span>
            </li>
            <li>
                <span>Item 3</span>
            </li>
        </ul>
    </div>
</div>
<div class="row">
    <h2 class="text-center">Hierarchy</h2>
    <div class="col-sm-3 col-sm-offset-3">
        <ul id="hierarchical-unordered-list">
            <li>
                <span>Item 1</span>
                <ul>
                    <li>
                        <span>Item 1.1</span>
                    </li>
                    <li>
                        <span>Item 1.2</span>
                    </li>
                </ul>
            </li>
            <li>
                <span>Item 2</span>
                <ul>
                    <li>
                        <span>Item 2.1</span>
                        <ul>
                            <li>
                                <span>Item 2.1.1</span>
                            </li>
                            <li>
                                <span>Item 2.1.2</span>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <span>Item 2.2</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-sm-3">
        <ol id="hierarchical-ordered-list">
            <li>
                <span>Item 1</span>
                <b class="number">1</b>
                <ol>
                    <li>
                        <span>Item 1.1</span>
                        <b class="number">1.1</b>
                    <li>
                        <span>Item 1.2</span>
                        <b class="number">1.2</b>
                    </li>
                </ol>
            </li>
            <li>
                <span>Item 2</span>
                <b class="number">2</b>
                <ol>
                    <li>
                        <span>Item 2.1</span>
                        <b class="number">2.1</b>
                        <ol>
                            <li>
                                <span>Item 2.1.1</span>
                                <b class="number">2.11</b>
                            <li>
                                <span>Item 2.1.2</span>
                                <b class="number">2.12</b>
                            </li>
                        </ol>
                    <li>
                        <span>Item 2.2</span>
                        <b class="number">2.2</b>
                    </li>
                </ol>
            </li>
            <li style="display: none">
                <span id="some-id">Item 3</span>
                <b class="number">3</b>
                <ol>
                    <li>
                        <span>Item 3.1</span>
                        <b class="number">3.1</b>
                    <li>
                        <span>Item 3.2</span>
                        <b class="number">3.2</b>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</div>
